function splashLoad( application, clickPage, passivePage ) {

    $('.splashQuestionContainer').hide();
    $('.footer').hide();

    var marginLeft = ( $(window).width() - $('.splashQuestionContainer').width() ) / 2;
    var marginTop = ( $(window).height() - $('.splashQuestionContainer').height() ) / 2;
            
    $('.splashQuestionContainer').css( { 'margin-top': marginTop, 'margin-left': marginLeft } );
              
    $('.footer').fadeIn( 2000 );
          
    $(document).click( function() { action = true; window.location = [ '/', application, clickPage ].join(''); } );

    $('.splashQuestionContainer').fadeIn( 2000, function() {

          setTimeout( function() { if( action == false ) { $('.footer').fadeOut( 2000 ); $('.splashQuestionContainer').fadeOut( 2000, function() { window.location = [ '/', application, passivePage ].join(''); action = false; } ); } }, 5000 ); } );
}
      
     
function singleQuestionLoad( application, question ) {

    var marginLeft = ( $(window).width() - $('.splashQuestionContainer').width() ) / 2;
    var questionMarginTop = ( $(window).height() - $('.splashQuestionContainer').height() ) / 6;
            
    $('.splashQuestionContainer').css( { 'margin-top': questionMarginTop, 'margin-left': marginLeft } );
    
    var buttonMarginTop = ( $(window).height() - $('.singleQuestionButtonContainer').height() ) / 6;

    $('.singleQuestionButtonContainer').css( { 'margin-top': buttonMarginTop } );

    $('.contributeButton').click( function() { playSound(application); setTimeout( function() { window.location = [ '/', application, '/default/three', question, '.html' ].join(''); }, 500 ); } );
    $('.viewButton').click( function() { playSound(application); setTimeout( function() { window.location = [ '/', application, '/default/four', question, '.html' ].join(''); }, 500 ); } );
    $('.chooseButton').click( function() { playSound(application); setTimeout( function() { window.location = [ '/', application, '/default/five', question, '.html' ].join(''); }, 500 ); } );

    $('.singleQuestionButton').mousedown( function() { $(this).removeClass('singleQuestionButtonShadow'); } ).mouseup( function() { $(this).addClass('singleQuestionButtonShadow'); } );
    $(document).mouseup( function() { $('.singleQuestionButton').each( function( index, el ) { if( ! $(el).hasClass('singleQuestionButtonShadow') ) { $(el).addClass('singleQuestionButtonShadow'); } } ); } )

    pageTimeout( application, 15000 );
} 

function singleQuestionAddButtons() {

    $('.singleQuestionButtonContainer').append(
        makeEl('div').attr( { 'class': 'singleQuestionTwoButtonRow' } ).append(
            makeEl('div').attr( { 'class': 'contributeButton fLeft singleQuestionButton autoMarginWidth singleQuestionButtonShadow' } ).append(
                makeEl('div').attr( { 'class': 'buttonMainText' } ).text( 'Contribute' ),
                makeEl('div').attr( { 'class': 'buttonDetailText' } ).text( 'Respond to this question' ) ),
            makeEl('div').attr( { 'class': 'viewButton fRight singleQuestionButton autoMarginWidth singleQuestionButtonShadow' } ).append(
                makeEl('div').attr( { 'class': 'buttonMainText' } ).text( 'View' ),
                makeEl('div').attr( { 'class': 'buttonDetailText' } ).text( 'See what others have shared' ) ),
            makeEl('div').attr( { 'class': 'clear' } ) ),
        makeEl('div').attr( { 'class': 'singleQuestionOneButtonRow' } ).append(
            makeEl('div').attr( { 'class': 'chooseButton singleQuestionButton autoMarginWidth singleQuestionButtonShadow' } ).append(
                makeEl('div').attr( { 'class': 'buttonMainText' } ).text( 'Choose' ),
                makeEl('div').attr( { 'class': 'buttonDetailText' } ).text( 'Select another question' ) ) ) );
}

function page3Ready( application ) {

    $('.formInput').focus(
    
        function() {

            var el = $(this);

            if( el.val() == '(optional)' ) { el.select(); }

            $('.ui-widget').hide();

            var keyboardDiv = $( el.getkeyboard().$keyboard );
            var keyboardContainer = $('.keyboardContainer').height( keyboardDiv.height() );

            keyboardDiv.appendTo( keyboardContainer ).show()
                       .css( { top: 0, left: 0 } );

            keyboardDiv.find( 'button[title="Accept"]' ).hide();
            keyboardDiv.find( 'button[title="Cancel"]' ).hide();
              
            keyboardDiv.find( 'button[title="Tab"]' ).unbind('mousedown').bind( 'mousedown', { el: el }, page3FocusAppropriately );
    
            $('button.ui-keyboard-button').mousedown( function() { playSound( application, 'type' ); } );
        }
    );
    
    $(document).mouseup(

        function(e) { e.preventDefault(); }

    );

    $(document).mousedown(
        
        function() {

            var el = $(":focus");

            if( el.hasClass('greyText') && el.val() != '(optional)' ) {

                el.removeClass('greyText');
            }
        }
    );


    $('#firstNameInput').focus();
   
    var marginLeft = ( $(window).width() - $('.page3Container').width() ) / 2;
    $('.page3Container').css( { 'margin-left': marginLeft } );

    $('.page3ChooseButton').css( { top: $('.keyboardContainer').height() / 2 } );
    
    pageTimeout( application, 30000, { time: 10000, message: 'Are you still writing?' } );
}

function page3FocusAppropriately( p ) {

  var input = p.data.el;

  var currentFocusId = input.attr('id');

  var futureFocusId =
      ( currentFocusId == 'firstNameInput' )
        ? 'ageInput'
        : ( currentFocusId == 'ageInput' )
            ? 'hometownInput'
            : ( currentFocusId == 'hometownInput' )
                ? 'contributeInput'
                : 'firstNameInput';

  $( [ '#', futureFocusId ].join('') ).focus();
}

function page3Begin( application, question ) {

  $('.chooseButton').click( function() {
       var url =  [ '/', application, '/default/five', question, '.html' ].join('');
       playSound( application );
       if( $('#contributeInput').val() != '' ) { confirmLeave( url, application ); } else { setTimeout( function() { window.location = url }, 500 ); }
  } );

  $('.formInput').keyboard( { usePreview: false, stayOpen: true } );

  $('.page3SubmitButton').click( function() { if( $.trim( $('#contributeInput').val() ) != '' ) { playSound( application ); setTimeout( function() { $('#input').submit(); }, 500 ); } } ).css( { 'margin-top': ( $('.responseContainer').height() - $('.page3SubmitButton').height() ) / 2 } );

  $('.disclaimerContainer').height( $('.shortInputContainer').height() / 2 ).width( ( $('.responseContainer .formLabel').width() + $('#contributeInput').width() ) - $('.shortInputContainer').width() )
                           .css( { 'margin-top': ( $('.shortInputContainer').height() / 4 ) } );
  
  //$('.page3ChooseButton').css( { 'bottom': 0, right: 0 } );
    
  $('.page3SubmitButton').mousedown( function() { $(this).removeClass('page3SubmitButtonShadow'); } ).mouseup( function() { $(this).addClass('page3SubmitButtonShadow'); } );
  $('.page3ChooseButton').mousedown( function() { $(this).removeClass('page3ChooseButtonShadow'); } ).mouseup( function() { $(this).addClass('page3ChooseButtonShadow'); } );

  $(document).mouseup(
        function() { if( ! $('.page3SubmitButton').hasClass('page3SubmitButtonShadow') ) { $('.page3SubmitButton').addClass('page3SubmitButtonShadow'); }
                     if( ! $('.page3ChooseButton').hasClass('page3ChooseButtonShadow') ) { $('.page3ChooseButton').addClass('page3ChooseButtonShadow'); } } );
}

function page3AddDOMObjects( question ) {

    $('.page3MainPanel').append(
        makeEl('div').attr( { 'class': 'page3InputPanel' } ).append(
            makeEl('form').attr( { 'id': 'input', name: 'input', action: [ 'six', question, '.html' ].join(''), method: 'get' } ).append(
                makeEl('div').attr( { 'class': 'inputAndDisclaimerContainer' } ).append(
                    makeEl('div').attr( { 'class': 'shortInputContainer' } ).append(
                        makeEl('div').attr( { 'class': 'formRow' } ).append(
                            makeEl('div').attr( { 'class': 'formLabel' } ).text( 'First name' ),
                            makeEl('input').attr( { 'id': 'firstNameInput', 'name': 'firstNameInput', 'class': 'formInput nameInput greyText', 'type': 'text' } ).val( '(optional)' ),
                            makeEl('div').attr( { 'class': 'clear' } ) ),
                        makeEl('div').attr( { 'class': 'formRow' } ).append(
                            makeEl('div').attr( { 'class': 'formLabel' } ).text( 'Age' ),
                            makeEl('input').attr( { 'id': 'ageInput', 'name': 'ageInput', 'class': 'formInput ageInput greyText', 'type': 'text' } ).val( '(optional)' ),
                            makeEl('div').attr( { 'class': 'clear' } ) ),
                        makeEl('div').attr( { 'class': 'formRow' } ).append(
                            makeEl('div').attr( { 'class': 'formLabel' } ).text( 'Hometown' ),
                            makeEl('input').attr( { 'id': 'hometownInput', 'name': 'hometownInput', 'class': 'formInput hometownInput greyText', 'type': 'text' } ).val( '(optional)' ),
                            makeEl('div').attr( { 'class': 'clear' } ) ) ),
                    makeEl('div').attr( { 'class': 'disclaimerContainer' } ).append(
                        makeEl('div').attr( { 'class': 'page3Disclaimer' } ).text( 'The Field Museum reserves the right to remove abusive or inappropriate responses.' ),
                        makeEl('div').attr( { 'class': 'page3WebNotify' } ).text( 'Your response may be posted to fieldmuseum.org, the Museum’s website.' ) ),
                    makeEl('div').attr( { 'class': 'clear' } ) ),
                makeEl('div').attr( { 'class': 'responseContainer' } ).append(
                    makeEl('div').attr( { 'class': 'formRow' } ).append(
                        makeEl('div').attr( { 'class': 'formLabel' } ).html( '&nbsp;' ),
                        makeEl('textarea').attr( { 'id': 'contributeInput', 'name': 'contributeInput', 'class': 'formInput contributeInput' } ),
                        makeEl('div').attr( { 'class': 'chooseButton page3ChooseButton page3ChooseButtonShadow' } ).append(
                                    makeEl('div').attr( { 'class': 'buttonMainText' } ).text('Choose'),
                                    makeEl('div').attr( { 'class': 'buttonDetailText' } ).text('Select another question') ),
                        makeEl('div').attr( { 'class': 'clear' } ) ) ) ) ) );

    $('.keyboardContainer').append(
        makeEl('div').attr( { 'class': 'page3SubmitButton page3SubmitButtonShadow flagBlue' } ).append(
            makeEl('div').attr( { 'class': 'buttonMainText' } ).text( 'Submit' ),
            makeEl('div').attr( { 'class': 'buttonDetailText' } ).text( 'You will not be able to edit your response after you click submit.' ) ) );

    $('.emailContainer').append(
        makeEl('div').attr( { 'class': 'page3EmailNotify' } ).append(
            makeEl('span').attr( { 'class': 'flagBlue' } ).text('You may also email your response to '),
            makeEl('span').attr( { 'class': 'bold flagRed' } ).text('groundzero@fieldmuseum.org') ) );
}

function addPage5QuestionRow( domObj, question, application ) {

    if( question == 'B' ) {

        domObj.append(
            makeEl('div').attr( { 'class': 'anotherQuestion fLeft' } ).append(
                makeEl('div').attr( { 'class': 'flagBlue' } ).text( 'What image or object in this' ),
                makeEl('div').attr( { 'class': 'flagBlue' } ).text( 'exhibition moved you the most?' ),
                makeEl('div').attr( { 'class': 'flagRed bold' } ).text( 'Why?' ) ) );

    } else if( question == 'C' ) {

        domObj.append(
            makeEl('div').attr( { 'class': 'anotherQuestion fLeft' } ).append(
                makeEl('div').append(
                    makeEl('span').attr( { 'class': 'flagRed bold' } ).text('What scared you '),
                    makeEl('span').attr( { 'class': 'flagBlue' } ).text('most about') ),
                makeEl('div').attr( { 'class': 'flagBlue' } ).text('the events of 9/11?') ) );

    } else if( question == 'A' ) {
        
        domObj.append(
            makeEl('div').attr( { 'class': 'anotherQuestion fLeft' } ).append(
                makeEl('div').attr( { 'class': 'flagBlue' } ).text('Did the events of 9/11 change'),
                makeEl('div').append(
                    makeEl('span').attr( { 'class': 'flagBlue' } ).text('how you define a '),
                    makeEl('span').attr( { 'class': 'flagRed bold' } ).text('hero?') ) ) );
    }

    domObj.append(
        makeEl('div').attr( { 'class': 'anotherQuestionAction fLeft' } ).append(
            makeEl('div').attr( { 'class': 'fLeft largeButton contributeButton page5Button page5ButtonShadow autoMarginWidth' } ).append(
                makeEl('div').attr( { 'class': 'buttonMainText flagBlue' } ).text('Contribute'),
                makeEl('div').attr( { 'class': 'buttonDetailText flagBlue' } ).text('Respond to this question') ),
            makeEl('div').attr( { 'class': 'fRight largeButton viewButton page5Button page5ButtonShadow autoMarginWidth' } ).append(
                makeEl('div').attr( { 'class': 'buttonMainText flagBlue' } ).text('View'),
                makeEl('div').attr( { 'class': 'buttonDetailText flagBlue' } ).text('See what others have shared') ),
            makeEl('div').attr( { 'class': 'clear' } ) ),
        makeEl('div').attr( { 'class': 'clear' } ) );

    domObj.find('div.contributeButton').click( function() { playSound( application ); setTimeout( function() { window.location = [ '/', application, '/default/three', question, '.html' ].join(''); }, 500 ); } );
    domObj.find('div.viewButton').click( function() { playSound( application ); setTimeout( function() { window.location = [ '/', application, '/default/four', question, '.html' ].join(''); }, 500 ); } );

    $('.page5Button').mousedown( function() { $(this).removeClass('page5ButtonShadow'); } ).mouseup( function() { $(this).addClass('page5ButtonShadow'); } );
    $(document).mouseup( function() { $('.page5Button').each( function( index, el ) { if( ! $(el).hasClass('page5ButtonShadow') ) { $(el).addClass('page5ButtonShadow'); } } ); } )
}

function page5Setup( application ) {

    var pageHeight = $('.page5Container').height();
    var pageWidth = $('.page5Container').width();

    var questionHeight = $('.page5QuestionContainer').height();
    var questionWidth = $('.page5QuestionContainer').width();

    $('.page5QuestionContainer').css( { 'top': ( pageHeight - questionHeight ) / 2, 'left': ( pageWidth - questionWidth ) / 2 } );

    pageTimeout( application, 10000 );
}

function page4AddDOMObjects( question ) {

    $('.page4LeftPanel').append(
         makeEl('div').attr( { 'class': 'contributeButton page5ContributeButton page5ContributeButtonShadow' } ).append(
                    makeEl('div').attr( { 'class': 'buttonMainText' } ).text('Contribute'),
                    makeEl('div').attr( { 'class': 'buttonDetailText' } ).text('Respond to this question') ),
         makeEl('div').attr( { 'class': 'chooseButton page5ChooseButton page5ChooseButtonShadow' } ).append(
                    makeEl('div').attr( { 'class': 'buttonMainText' } ).text('Choose'),
                    makeEl('div').attr( { 'class': 'buttonDetailText' } ).text('Select another question') ) );       
    
    $('.page4RightPanel').append(
        makeEl('div').attr( { 'class': 'page4ResponseContainer' } ).append(
            makeEl('div').attr( { 'class': 'page4Response' } ),
            makeEl('div').attr( { 'class': 'page4Contributor centerText' } ) ) );


    $('.page4NextResponseContainer').append(
        makeEl('div').attr( { 'class': 'nextResponseButton nextResponseButtonShadow' } ).append(
            makeEl('div').attr( { 'class': 'nextResponseText' } ).text('Next response') ) );
}

function page4Ready( application, question ) {

    $.ajax( { url: [ '/', application, '/default/getResponseIndex/', question ].join(''),
              type: "GET",
              success: saveResponseIndex } );

    $('.page4LeftPanel').css( { 'margin-top': ( $('.page4Container').height() / 5 ), 'margin-left': 100, 'margin-right': 100 } );
    
    $('.page4RightPanel').width( $('.page4Container').width() - $('.page4LeftPanel').outerWidth( true ) - 50 ).css( { 'margin-top': 100 } );
    
    $('.page4Response').css( { 'margin-bottom': 50 } );
    
    $('.nextResponseText').css( { 'margin-top': ( $('.nextResponseButton').height() - $('.nextResponseText').height() ) / 2 } );


    $('.page5ContributeButton').mousedown( function() { $(this).removeClass('page5ContributeButtonShadow'); } ).mouseup( function() { $(this).addClass('page5ContributeButtonShadow'); } )
                               .click( function() { playSound( application ); setTimeout( function() { window.location = [ '/', application, '/default/three', question, '.html' ].join(''); }, 500 ); } );

    $('.page5ChooseButton').mousedown( function() { $(this).removeClass('page5ChooseButtonShadow'); } ).mouseup( function() { $(this).addClass('page5ChooseButtonShadow'); } )
                           .click( function() { playSound( application ); setTimeout( function() { window.location = [ '/', application, '/default/five', question, '.html' ].join(''); }, 500 ); } );

    $('.nextResponseButton').mousedown( function() { $(this).removeClass('nextResponseButtonShadow'); } ).mouseup( function() { $(this).addClass('nextResponseButtonShadow'); } )
                            .click( function() { playSound( application ); getResponse(); } );

    $(document).mouseup(
        function() { if( ! $('.page5ContributeButton').hasClass('page5ContributeButtonShadow') ) { $('.page5ContributeButton').addClass('page5ContributeButtonShadow'); }
                     if( ! $('.nextResponseButton').hasClass('nextResponseButtonShadow') ) { $('.nextResponseButton').addClass('nextResponseButtonShadow'); }
                     if( ! $('.page5ChooseButton').hasClass('page5ChooseButtonShadow') ) { $('.page5ChooseButton').addClass('page5ChooseButtonShadow'); } } );
    
    pageTimeout( application, 30000, { time: 7000, message: 'Are you still reading?' } );
}

function saveResponseIndex( response ) {

    responseIndex = eval( "(" + response + ")" );

    getResponse();
}

function getResponse() {

    var id = responseIndex[ currentPage ].id;

    $.ajax( { url: [ '/', application, '/default/getResponse/', id ].join(''),
              type: "GET",
              success: renderResponse } );

    currentPage++;

    if( currentPage == responseIndex.length ) { currentPage = 0; }
}

function renderResponse( response ) {

    var response = eval( "(" + response + ")" );

    $('.page4Response').text( response.contribution );

    var contributorText = '';

    if( response.firstName ) { contributorText += response.firstName; } else { contributorText = 'Anonymous'; }

    if( response.age ) {

        contributorText += ", " + response.age;
    }

    if( response.hometown ) {

        contributorText += ', ' + response.hometown;
    }

    $('.page4Contributor').text( contributorText );
}

function page6Ready( application, question ) {

    $('.page6ContinueButtonContainer').append(
        makeEl('div').attr( { 'class': 'continueButton continueButtonShadow' } ).append(
            makeEl('div').attr( { 'class': 'continueButtonText' } ).text('Continue') ),
        makeEl('div').attr( { 'class': 'clear' } ) );
   
     
    $('.continueButtonText').css( { 'margin-top': ( $('.continueButton').height() - $('.continueButtonText').height() ) / 2 } );

    $('.continueButton').mousedown( function() { $(this).removeClass('continueButtonShadow'); } ).mouseup( function() { $(this).addClass('continueButtonShadow'); } )
                            .click( function() { playSound( application ); setTimeout( function() { window.location = [ '/', application, '/default/seven', question, '.html' ].join(''); }, 500 ); } )
                            .css( { 'margin-left': ( $('.page6Container').width() - $('.continueButton').outerWidth( true ) ) / 2 } );
    
    $(document).mouseup( function() { $('.continueButton').each( function( index, el ) { if( ! $(el).hasClass('continueButtonShadow') ) { $(el).addClass('continueButtonShadow'); } } ); } )

    $('.page4ResponseContainer').width( 800 ).height( 350 ).css( { 'overflow': 'auto', 'padding-top': 100, 'padding-left': ( $('.page6Container').width() - $('.page4ResponseContainer').outerWidth( true ) ) / 2 } );

    pageTimeout( application, 15000 );
}

function page6PopulateContributor( firstName, age, hometown ) {

    var contributorText = '';

    if( firstName ) { contributorText += firstName; } else { contributorText = 'Anonymous'; }

    if( age ) {

        contributorText += ", " + age;
    }

    if( hometown ) {

        contributorText += ', ' + hometown;
    }

    $('.page4Contributor').text( contributorText ).css( { 'margin-top': 50 } );
}

function page7Begin() {

    $('.page7ButtonContainer').append(
        makeEl('div').attr( { 'class': 'chooseButton fLeft singleQuestionButton autoMarginWidth singleQuestionButtonShadow' } ).append(
            makeEl('div').attr( { 'class': 'buttonMainText' } ).text( 'Choose' ),
            makeEl('div').attr( { 'class': 'buttonDetailText' } ).text( 'Select another question' ) ),
        makeEl('div').attr( { 'class': 'viewButton fRight singleQuestionButton autoMarginWidth singleQuestionButtonShadow' } ).append(
            makeEl('div').attr( { 'class': 'buttonMainText' } ).text( 'View' ),
            makeEl('div').attr( { 'class': 'buttonDetailText' } ).text( 'See what others have shared' ) ),
        makeEl('div').attr( { 'class': 'clear' } ) );
}

function page7Ready( application, question ) {

    $('.page7ButtonContainer').css( { 'padding-top': 200, 'margin-left': 50, 'margin-right': 50 } );

    $('.viewButton').click( function() { playSound( application ); setTimeout( function() { window.location = [ '/', application, '/default/four', question, '.html' ].join(''); }, 500 ); } );
    $('.chooseButton').click( function() { playSound( application ); setTimeout( function() { window.location = [ '/', application, '/default/five', question, '.html' ].join(''); }, 500 ); } );

    $('.singleQuestionButton').mousedown( function() { $(this).removeClass('singleQuestionButtonShadow'); } ).mouseup( function() { $(this).addClass('singleQuestionButtonShadow'); } );
    $(document).mouseup( function() { $('.singleQuestionButton').each( function( index, el ) { if( ! $(el).hasClass('singleQuestionButtonShadow') ) { $(el).addClass('singleQuestionButtonShadow'); } } ); } )
    
    pageTimeout( application, 15000 );
}


function pageTimeout( application, time, warning ) {

    if( warning ) {

        var timeoutHandler =

            function() {

                clearTimeout( warningTimeoutObj );
                
                if( timeoutObj ) { clearTimeout( timeoutObj ); removeWarning(); }

                warningTimeoutObj = setTimeout( function() {
                            displayWarning( warning.message );
                            timeoutObj = setTimeout( function() { window.location = [ '/', application, '/default/index.html' ].join(''); }, warning.time );
                }, time );
            }

        $(document).bind( 'mousedown', timeoutHandler );

        warningTimeoutObj = setTimeout( function() { displayWarning( warning.message );
        timeoutObj = setTimeout( function() { window.location = [ '/', application, '/default/index.html' ].join(''); }, warning.time ); }, time );

    } else {

        var timeoutHandler =
            function() {
                clearTimeout( timeoutObj );
                timeoutObj = setTimeout( function() { window.location = [ '/', application, '/default/index.html' ].join(''); }, time ); }

        $(document).bind( 'mousedown', timeoutHandler );

        timeoutObj = setTimeout( function() { window.location = [ '/', application, '/default/index.html' ].join(''); }, time );
    }
}

function displayWarning( message ) {

    var make = makeEl;

    $('body').append(
        make('div').attr( { 'id': 'modalBoxContainer' } ).append(
            make('div').attr( { 'class': 'modalBoxOverlay' } ),
            make('div').attr( { 'id': 'modalBoxContent' } ).append(
                make('div').attr( { 'id': 'modalBoxTitle' } ),
                make('div').attr( { 'id': 'modalBoxForm', 'class': 'flagBlue modalBoxForm' } ) ) ) );           

    $('#modalBoxForm').append( make('div').text( message ), make('div').text('Touch screen to continue.' ).css( { 'padding-top': 25 } ) );

    $('#modalBoxContainer').show( 'slow', function() { alignWarning(); } );
}

function confirmLeave( url, application ) {

    var make = makeEl;

    $('body').append(
        make('div').attr( { 'id': 'modalBoxContainer' } ).append(
            make('div').attr( { 'class': 'modalBoxOverlay' } ),
            make('div').attr( { 'id': 'modalBoxContent' } ).append(
                make('div').attr( { 'id': 'modalBoxTitle' } ),
                make('div').attr( { 'id': 'modalBoxForm', 'class': 'flagBlue modalBoxForm' } ) ) ) );           

    $('#modalBoxForm').append(
        make('div').text( 'You have chosen to leave this page.'),
        make('div').text( 'If you continue, your response will be lost.' ),
        make('div').css( { 'padding-top': 25 } ).append(
            make('div').attr( { 'class': 'fLeft confirmLeaveButton' } ).text('Continue').click( function() { playSound( application ); setTimeout( function() { window.location = url; }, 500 ); } ),
            make('div').attr( { 'class': 'fRight cancelLeaveButton' } ).text('Cancel').click( function() { playSound( application ); removeWarning(); clearTimeout( timeoutObj ); $(document).unbind( 'mousedown', timeoutHandler ); pageTimeout( application, 30000, { time: 10000, message: 'Are you still writing?' } ); } ),
            make('div').attr( { 'class': 'clear' } ) ) );

    $('#modalBoxContainer').show( 'slow', function() { alignWarning(); } );

    $(document).unbind( 'mousedown', timeoutHandler );
    pageTimeout( application, 15000 );
}

function alignWarning() {

    var content = $('#modalBoxContent');
    var form = $('#modalBoxForm');
    var myDocument = $(document);

    content.css( { top: ( ( myDocument.height() - content.outerHeight( true ) ) / 2 ),
                  left: ( ( myDocument.width() - content.outerWidth( true ) ) / 2 ) } );
}

function removeWarning() { $('#modalBoxContainer').empty().remove(); }

function removeSound() { 
    //setTimeout( function() { $( $('audio')[0] ).empty().remove(); }, 2000 );
}

function playSound( application, type ) { 

    var sound = ( type ) ? 'typewriter-key-1.mp3' : 'buttonClick.mp3';
   
    $('#soundContainer').html( makeEl('audio').attr( { 'src': [ '/', application, '/static/', sound ].join(''), 'hidden': true, 'autoplay': true, 'loop': false } ) );
}

function makeEl( elementName ) { return $(document.createElement(elementName)); };

$(document).ready( function() { $('html').attr( 'onselectstart', 'return false;' ); $('body').append( makeEl('div').attr( { 'id': 'soundContainer' } ) ); } ) 

var timeoutObj = undefined;
var warningTimeoutObj = undefined;
var timeoutHandler = undefined;
